@mixin clearfix {
  &::after {
    display: table;
    clear: both;

    content: "";
  }
}
@mixin absCenter {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

//MEDIA QUERY MANAGER
/*
0-600px          Phone
600-900px       Tablet portrait
900 - 1200px   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :        Big desktop


*/

@mixin respond-phone {
  @media (max-width: 600px) {
    @content;
  }
}
/*
$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px

ORDER: Base + typography > general layout + grid > page layout > components
*/

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    // 600px  如果是打印则样式无效，只有是屏幕的时候才可以
    @media only screen and (max-width: 37.5em) {
      @content;
    }
  }
  @if $breakpoint == tab-port {
    //900px
    @media only screen and (max-width: 56.25em) {
      @content;
    }
  }
  @if $breakpoint == tab-land {
    //1200px
    @media only screen and (max-width: 75em) {
      @content;
    }
  }
  @if $breakpoint == big-desktop {
    //1800px
    @media only screen and (min-width: 112.5em) {
      @content;
    }
  }
}
